<template>
<div class="screen-container">
  <div class="screen-head">
    <div class="head-left">
      <div style="height: 100%;width: 100%; position: absolute; top: 10px; left: 10px;" class="log-bg">
        <img src="../../public/static/img/logo1.png" style="width: 100%; height: 100%;">
      </div>
    </div>
    <div class="head-middle">
      <div class="title">
       <div class="title_">
         <span class="iconfont" style="font-size: 25px;">&#xe63b;</span>
         冬残奥会可视化系统
         <span class="iconfont" style="font-size: 25px;">&#xe646;</span>
       </div>
      </div>
      <div class="tag_a">
        <div class="tabbar"><div class="tabbar_">
        <span class="iconfont" style="font-size: 25px;">&#xe63a;</span>
        <a href="http://127.0.0.1:8080" class="tag_aa">世界冬残奥史</a></div></div>
        <div class="tabbar"><div class="tabbar_">
        <span class="iconfont" style="font-size: 25px;">&#xe640;</span>
        <a href="http://127.0.0.1:8080/screen1" class="tag_aa">中国冬残奥史</a></div></div>
        <div class="tabbar"><div class="tabbar_">
        <span class="iconfont" style="font-size: 25px;">&#xe64a;</span>
        <a href="http://127.0.0.1:8080/screen2" class="tag_aa">北京冬残奥会</a></div></div>
      </div>
    </div>
    <div class="head-right">
      <img src="../../public/static/img/logo2.png" style="width: 100%; height: 100%;">
    </div>
  </div>
  <div class="screen-body">
    <div class="hot-bottom">
      <div class="title2022">
        <div class="title-left">项目介绍</div>
        <div class="title-right"><a href="https://www.beijing2022.cn/cn/olymp
      </div>ics/speed_skating.htm" target="_blank" style="text-decoration: none; color: royalblue;">更多&nbsp;&nbsp;&nbsp;&nbsp;<span class="iconfont" style="font-size: 25px;">&#xe645;</span></a></div>
      <div class="content">
        <div class="num-2-1">
          <div class="num2">
            <div class="num_2 donghua01">
              <img src="/static/img/01.jpg" style="width: 100%; height: 100%;">
              <a href="http://127.0.0.1:8080/itemOne1page" target="_blank" style="cursor: pointer;text-decoration: none;">
                <div class="front"><img src="/static/img/01.jpg" style="width: 100%; height: 100%;"></div>
                  <div class="backE1"><br><p></p>短道速滑</div>
              </a>
              </div>
            <div class="num_2 donghua01">
               <div class="front" style="background-color: #1466c3;"></div>
              <div class="back"><br><p></p></div>
            </div>
          </div>
          <div class="num2">
            <div class="num_2"></div>
            <div class="num_2 donghua01">
              <a href="http://127.0.0.1:8080/itemOne3page" target="_blank" style="cursor: pointer;text-decoration: none;">
                <div class="front"><img src="/static/img/03.jpg" style="width: 100%; height: 100%;"></div>
              <div class="backE2"><br><p></p>花样滑冰</div>
              </a>
            </div>
          </div>
          <div class="num2">
            <div class="num_2 donghua02">
              <div class="front"><img src="/static/img/04.jpg" style="width: 100%; height: 100%;"></div>
              <div class="backE1"></div>
            </div>
            <div class="num_2"></div>
          </div>
          <div class="num2">
            <div class="num_2 donghua02">
              <a href="http://127.0.0.1:8080/itemOne4page" target="_blank" style="cursor: pointer;text-decoration: none;">
                <div class="front"><img src="/static/img/05.jpg" style="width: 100%; height: 100%;"></div>
              <div class="back"><br><p></p>冰球</div>
              </a>
            </div>
            <div class="num_2 donghua03">
              <div class="front" style="background-color: #0f89de;"></div>
              <div class="backE2" style="background-color: #063480;"><br><p></p></div>
            </div>
          </div>
        </div>
        <div class="num-0">
          <div class="num0">
            <div class="num_0 donghua04">
              <a href="http://127.0.0.1:8080/itemOne2page" target="_blank" style="cursor: pointer;text-decoration: none;">
              <div class="front00"><img src="/static/img/11.jpg" style="width: 100%; height: 100%; bac"></div>
              <div class="backO1"><br><p></p>速度滑冰</div>
              </a>
            </div>
            <div class="num_0 donghua05">
              <div class="front00" style="background-color: #e60000;"></div>
              <div class="backO2" style="background-color: #ffa500;"><br><p></p></div>
            </div>
            <div class="num_0 donghua06">
              <a href="http://127.0.0.1:8080/itemTwo3page" target="_blank" style="cursor: pointer;text-decoration: none;">
              <div class="front00"><img src="/static/img/13.jpg" style="width: 100%; height: 100%;"></div>
              <div class="backO1"><br><p></p>越野滑雪</div>
              </a>
            </div>
          </div>
          <div class="num0">
            <div class="num_0 donghua04">
              <div class="front00"><img src="/static/img/14.jpg" style="width: 100%; height: 100%;"></div>
              <div class="backO2"><br><p></p></div>
            </div>
            <div class="num_0"></div>
            <div class="num_0 donghua06">
              <a href="http://127.0.0.1:8080/itemTwo4page" target="_blank" style="cursor: pointer;text-decoration: none;">
              <div class="front00"><img src="/static/img/15.jpg" style="width: 100%; height: 100%;"></div>
              <div class="back00"><br><p></p>北欧两项</div>
              </a>
            </div>
          </div>
          <div class="num0">
            <div class="num_0 donghua06">
              <a href="http://127.0.0.1:8080/itemTwo5page" target="_blank" style="cursor: pointer;text-decoration: none;">
              <div class="front00"><img src="/static/img/16.jpg" style="width: 100%; height: 100%;"></div>
              <div class="backO2"><br><p></p>自由式滑雪空中技巧</div>
              </a>
            </div>
            <div class="num_0"></div>
            <div class="num_0 donghua04">
              <div class="front00" style="background-color: #ff7f00;"></div>
              <div class="backO1" style="background-color: #dc143c;"><br><p></p></div>
            </div>
          </div>
          <div class="num0">
            <div class="num_0 donghua06">
              <a href="http://127.0.0.1:8080/itemTwo2page" target="_blank" style="cursor: pointer;text-decoration: none;">
              <div class="front00"><img src="/static/img/12.jpg" style="width: 100%; height: 100%;"></div>
              <div class="backO2"><br><p></p>跳台滑雪</div>
              </a>
            </div>
            <div class="num_0 donghua05">
              <div class="front00" style="background-color: #ffb311;"></div>
              <div class="backO2" style="background-color: #ffa500;"><br><p></p></div>
            </div>
            <div class="num_0 donghua04">
              <a href="http://127.0.0.1:8080/itemTwo6page" target="_blank" style="cursor: pointer;text-decoration: none;">
              <div class="front00"><img src="/static/img/13.jpg" style="width: 100%; height: 100%;"></div>
              <div class="backO2"><br><p></p>自由式滑雪雪上技巧</div>
              </a>
            </div>
          </div>
        </div>
        <div class="num-2">
          <div class="num2">
            <div class="num_2 donghua01">
              <a href="http://127.0.0.1:8080/itemOne5page" target="_blank" style="cursor: pointer;text-decoration: none;">
              <div class="front"><img src="/static/img/06.jpg" style="width: 100%; height: 100%;"></div>
              <div class="backE2"><br><p></p>冰壶</div>
              </a>
            </div>
            <div class="num_2 donghua01">
              <div class="front" style="background-color: #063481;"></div>
              <div class="backE2" style="background-color: #1a54c0;"><p></p></div>
            </div>
          </div>
          <div class="num2">
            <div class="num_2"></div>
            <div class="num_2 donghua02">
              <a href="http://127.0.0.1:8080/itemThree2page" target="_blank" style="cursor: pointer;text-decoration: none;">
              <div class="front"><img src="/static/img/32.jpg" style="width: 100%; height: 100%;"></div>
              <div class="backE2"><p></p>单板滑行平行大回转</div>
              </a>
            </div>
          </div>
          <div class="num2">
            <div class="num_2 donghua03">
              <div class="front"><img src="/static/img/34.jpg" style="width: 100%; height: 100%;"></div>
              <div class="back"><br><p></p></div>
            </div>
            <div class="num_2"></div>
          </div>
          <div class="num2">
            <div class="num_2 donghua03">
              <a href="http://127.0.0.1:8080/itemThree5page" target="_blank" style="cursor: pointer;text-decoration: none;">
              <div class="front"><img src="/static/img/36.jpg" style="width: 100%; height: 100%;"></div>
              <div class="back"><br><p></p>单板滑雪U型场地技巧</div>
              </a>
            </div>
            <div class="num_2 donghua03">
              <div class="front" style="background-color: #0c69c6;"></div>
              <div class="back" style="background-color: #063480;"><br><p></p></div>
            </div>
          </div>
        </div>
        <div class="num-2">
          <div class="num2">
            <div class="num_2 donghua01">
              <a href="http://127.0.0.1:8080/itemFour5page" target="_blank" style="cursor: pointer;text-decoration: none;">
              <div class="front"><img src="/static/img/46.jpg" style="width: 100%; height: 100%;"></div>
              <div class="backE2"><br><p></p>冬季两项</div>
              </a>
            </div>
            <div class="num_2 donghua01">
              <div class="front" style="background-color: #0088e9;"></div>
              <div class="back" style="background-color: #063480;"><br><p></p></div>
            </div>
          </div>
          <div class="num2">
            <div class="num_2"></div>
            <div class="num_2 donghua01">
              <a href="http://127.0.0.1:8080/itemFour2page" target="_blank" style="cursor: pointer;text-decoration: none;">
              <div class="front"><img src="/static/img/43.jpg" style="width: 100%; height: 100%;"></div>
              <div class="backE1"><br><p></p>雪橇</div>
              </a>
            </div>
          </div>
          <div class="num2">
            <div class="num_2 donghua02">
              <div class="front" style="background-color: #063481;"></div>
              <div class="backE1" style="background-color: #699dfd;"><br><p></p></div>
            </div>
            <div class="num_2"></div>
          </div>
          <div class="num2">
            <div class="num_2 donghua02">
              <a href="http://127.0.0.1:8080/itemFour4page" target="_blank" style="cursor: pointer;text-decoration: none;">
              <div class="front"><img src="/static/img/45.jpg" style="width: 100%; height: 100%;"></div>
              <div class="back"><br><p></p>雪车</div>
              </a>
            </div>
            <div class="num_2 donghua03">
              <div class="front" style="background-color: #1057c3;"></div>
              <div class="backE2" style="background-color: #1a54c0;"><br><p></p></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
</script>

<style>
@font-face {
  font-family: electronicFont;
  src: url(../assets/font/DS-DIGIT.TTF);
}
body {
  margin: 0;
  padding: 0;
}
html {
  height: 100vh;
  width: 100%;
}
#app {
  height: 100vh;
  width: 100%;
}
.screen-container {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.screen-head {
  width: 100%;
  height: 130px;
  margin-bottom: 10px;
  position: relative;
  background: url(../../public/static/img/head-bg.png);
  background-repeat: no-repeat;
  background-size: auto;
}
.screen-body{
  width: 100%;
  height: 650px;
  background: url(../../public/static/img/bc-p1.jpg);
  background-repeat: no-repeat;
}
.hot-top {
  width: 100%;
  height: 605px;
  margin-bottom: 10px;
  position: relative;
}
.hot-bottom {
  width: 100%;
  height: 100%;
  position: relative;
}
.title2022 {
  width: 100%;
  height: 20%;
  margin-bottom: 10px;
  position: relative;
}
.title-left {
  position: absolute;
  top: 60px;
  left: 115px;
  width: 200px;
  height: 80px;
  text-align: center;
  font-size: 35px;
  color: royalblue;
}
.title-right {
  position: absolute;
  top: 80px;
  right: 115px;
  width: 200px;
  height: 80px;
  text-align: center;
  font-size: 20px;
  color: royalblue;
}
.content {
  width: 100%;
  height: 75%;
}
/* 头部开始 */
.head-left{
  height: 100%;
  width: 24%;
  float: left;
/*  margin-left: 10px; */
  position: relative;
}
.head-middle{
  height: 100%;
  width: 50%;
  float: left;
  position: relative;
}
.head-right{
  height: 100%;
  width: 26%;
  float: left;
  position: relative;
  top: 10px;
}
.head-right-top{
  width: 100%;
  height: 30%;
  font-size: 20px;
  text-align: center;
}
.head-right-middle{
  width: 100%;
  height: 70%;
}
.day{
  width: 38%;
  height: 100%;
  float: left;
}
.time{
  width: 19%;
  height: 100%;
  float: left;
}
.time1{
  width: 19%;
  height: 100%;
  float: left;
}
.time-top{
  height: 25%;
  width: 100%;
  text-align: center;
  font-size: 20px;
}
.time-bottom{
  height: 75%;
  width: 100%;
  text-align: center;
  font-size: 35px;
  margin-top: 10px;
}
.title{
  width: 100%;
  height: 45%;
}
.title_{
  width: 100%;
  height: 100%;
  margin-top: 15px;
  font-size: 30px;
  font-family: electronicFont;
  text-align: center;
  color: #4169E1;
}
.tag_a{
  width: 100%;
  height: 50%;
  position: relative;
  color: #4169E1;
}
.tag_aa{
  color: black;
  font-size: 25px;
  text-decoration:none;
  color: #4169E1;
}
.tag_aa:hover{
  color: hotpink;
  text-decoration:none;
}
.tabbar{
  width: 30%;
  height: 80%;
  float: left;
  margin-left: 10px;
}
.tabbar_{
  width: 100%;
  height: 100%;
  margin-top: 15px;
  text-align: center;
}
.hot-top-left{
  float: left;
  height: 100%;
  width: 29%;
  border-style: solid;
}
#hot-top-middle{
  position: relative;
  position: absolute;
  height: 100%;
  width: 40%;
  top: 0;
  left: 455px;
}
.resize{
  position: absolute;
  top: 5px;
  right: 10px;
  cursor: pointer;
}
.hot-top-right{
  float: left;
  height: 100%;
  width: 29%;
  border-style: solid;
}
/* 头部结束 */
/* 2022布局 */
.num-2-1{
  width: 20%;
  height: 100%;
  margin-left: 131px;
  float: left;
  position: relative;
}
.num-2{
  width: 20%;
  height: 100%;
  float: left;
  position: relative;
}
.num-0{
  width: 25%;
  height: 100%;
  float: left;
}
.num2{
  width: 100%;
  height: 25%;
}
.num_2{
  float: left;
  width: 45%;
  height: 100%;
  position: relative;
}
.num0{
  width: 100%;
  height: 25%;
}
.num_0{
  float: left;
  width: 30%;
  height: 100%;
  position: relative;
}
/* 动画 */
.front00{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}
.back00{
  width: 100%;
  height: 100%;
  background-color: #063480;
  transform: rotateY(180deg);
  position: absolute;
  color: aliceblue;
  font-size: 18px;
  text-align: center;
  top: 0;
}
.front{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}
.back{
  width: 100%;
  height: 100%;
  background-color: #063480;
  transform: rotateY(180deg);
  position: absolute;
  color: aliceblue;
  font-size: 18px;
  text-align: center;
  top: 0;
}
.backO1{
  width: 100%;
  height: 100%;
  background-color: crimson;
  transform: rotateY(180deg);
  position: absolute;
  color: aliceblue;
  font-size: 18px;
  text-align: center;
  top: 0;
}
.backO2{
  width: 100%;
  height: 100%;
  background-color: orange;
  transform: rotateY(180deg);
  position: absolute;
  color: aliceblue;
  font-size: 18px;
  text-align: center;
  top: 0;
}
.backE1{
  width: 100%;
  height: 100%;
  background-color: rgb(105, 157, 253);
  transform: rotateY(180deg);
  position: absolute;
  color: aliceblue;
  font-size: 18px;
  text-align: center;
  top: 0;
}
.backE2{
  width: 100%;
  height: 100%;
  background-color: rgb(26, 84, 192);
  transform: rotateY(180deg);
  position: absolute;
  color: aliceblue;
  font-size: 20px;
  text-align: center;
}
.donghua01{
  transform-style: preserve-3d;
  animation: an1 12s cubic-bezier(0.9, 0, 0, 0.9)  0s infinite alternate forwards;
}
.donghua02{
  transform-style: preserve-3d;
  animation: an1 12s cubic-bezier(0.9, 0, 0, 0.9) 4s infinite alternate forwards;
}
.donghua03{
  transform-style: preserve-3d;
  animation: an1 12s cubic-bezier(0.7, 0, 0, 0.7) 8s infinite alternate forwards;
}
.donghua04{
  transform-style: preserve-3d;
  animation: an1 12s cubic-bezier(0.9, 0, 0, 0.9) 0s infinite alternate forwards;
}
.donghua05{
  transform-style: preserve-3d;
  animation: an1 12s cubic-bezier(0.9, 0, 0, 0.9) 4s infinite alternate forwards;
}
.donghua06{
  transform-style: preserve-3d;
  animation: an1 12s cubic-bezier(0.9, 0, 0, 0.9) 8s infinite alternate forwards;
}

@keyframes an1 {
  0%{
    transform: rotateY(0deg);
  }
  100%{
    transform: rotateY(180deg);
  }
}
@keyframes an2 {
  0%{
    transform: rotateY(0deg);
  }
  100%{
    transform: rotateY(180deg);
  }
}

/* 新开发的新闻页面 */
.news{
  width: 100%;
  height: 450px;
}
.menu{
  width: 100%;
  height: 115px;
  position: relative;
}
.news-img{
  width: 100%;
  height: 280px;
  position: relative;
}
.menu-1{
  position: relative;
  position: absolute;
  left: 20px;
  top: 40px;
  width: 14.4889%;
  height: 60px;
/*  background-color: aqua; */
}
.menu-2{
  position: relative;
  position: absolute;
  left: 240.35px;
  top: 40px;
  width: 14.4889%;
  height: 60px;
/*  background-color: antiquewhite; */
}
.news-img-1{
  position: relative;
  position: absolute;
  left: 6.5%;
  top: 5px;
  width: 39.5127%;
  height: 320px;
/*  background-color: chartreuse; */
}
/* .news-img-2{
  position: relative;
  position: absolute;
  left: 515px;
  top: 5px;
  width: 490px;
  height: 320px;
  background-color: chartreuse;
} */
.news-img-3{
  position: relative;
  position: absolute;
  right: 6.5%;
  top: 5px;
  width: 39.5127%;
  height: 320px;
/*  background-color: chartreuse; */
}
.menu-a{
  text-decoration: none;
}
.menu-a:hover{
  color: #FF69B4;
}
.img1-news{
  position: absolute;
  left:20px;
  top: 17.7807%;
  width: 29.6345%;
  list-style: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18px;
  color: white;
}
.img2-news{
  position: absolute;
  left: 1.3171%;
  top: 270px;
  width: 29.6345%;
  list-style: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18px;
  color: white;
}
.img3-news{
  position: absolute;
  left:20px;
  top: 270px;
  width: 450px;
  list-style: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18px;
  color: white;
}
</style>
